<!--
 * @Date         : 2020-10-28 09:42:58
 * @LastEditors  : zhangyu
 * @LastEditTime : 2020-11-04 15:26:21
 * @Description  : 
-->
<template>
	<div class="login-box">
	<el-card class="box-card">
		<div class="logo">
		<img src="../assets/logo.png" />
		</div>
		<h3 class="login-title">综合管理系统</h3>
		<el-form ref="form" :model="model">
			<el-form-item label="账户">
				<el-input v-model="model.username" @keyup.enter.native="onSubmit"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="model.password" type="password" @keyup.enter.native="onSubmit"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" :loading="isLoading" :round="true">立即登陆</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				model:{
					username:"",
					password:""
				},
				isLoading:false
			}
		},
		methods:{
			async onSubmit(){
				if(!this.model.username || !this.model.password){
					this.$message.error("请输入账号密码")
					return
				}
				this.isLoading = true
				let model = this.model
				let res = await this.$http.post('/user/login',model).catch(e=>{
					this.isLoading = false
				})
				if(!res)return;
				sessionStorage.setItem('token',res.token)
				sessionStorage.setItem('nickname',res.nickname)
				this.$message.success(`欢迎，${res.nickname}。`)
				this.$router.push('/')
			}
		}
	}
</script>

<style scoped="scoped">
	.logo{
		width: 64px;
		margin: 10px auto;
	}
	.login-box{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url(http://shop.liankebao.net/assets/store/img/login/login_bg.jpg) no-repeat;
	}
	.el-card {
		padding: 50px 30px 0 30px;
		width: 400px;
		margin: 20vh auto;
		
	}
	.el-button{
		width: 90%;
		margin-top: 30px;
		margin-left: 5%;
	}
	.login-title {
		text-align: center;
		padding-bottom: 1vh;
	}
</style>
